Vue.component("add-node", {
  //添加菜单组件
  template: `<el-dialog :title="form.Level==1?'添加菜单':'添加子菜单'" :visible.sync="visibleDialog" width="700px">
    <el-form ref="contract" :model="form" :rules="rules" :inline-message="true">
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="菜单名称">
                <el-form-item prop="Model_Name">
                    <el-input v-model.trim="form.Model_Name" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="绑定页面">
                <el-form-item prop="Url">
                    <el-select placeholder="可选择绑定页面" style="width: 100%;" clearable filterable v-model.trim="form.Url">
                        <el-option v-for="(item,index) in page" :key="index" :label="item.Page_Name" :value="item.File_Name"></el-option>
                    </el-select>
                </el-form-item>
            </el-descriptions-item> -->
            <el-descriptions-item label="绑定页面（开发）">
                <el-form-item prop="Url">
                    <el-input v-model.trim="form.Url" placeholder="请输入绑定页面路径"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="form.Level==1" label="菜单图标">
                <el-form-item prop="Icon">
                    <el-select placeholder="请选择菜单图标" style="width: 100%;" clearable filterable v-model.trim="form.Icon">
                        <el-option v-for="(item,index) in Icon" :key="index" :label="item" :value="'layui-icon '+item">
                            <i class="layui-icon" :class="item"></i>
                            <i>{{item}}</i>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm('contract')">提交</el-button>
    </span></el-dialog>`,
  props: ["data", "page", "visible"],
  data() {
    return {
      visibleDialog: false,
      Icon: [], //图标库
      form: {
        Model_Number: "",
        ...this.data,
        Icon: "",
        Model_Name: "",
      },
      rules: {
        Model_Name: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        Icon: [
          { required: true, message: "请选择菜单图标", trigger: "change" },
        ],
      },
      loading: false,
    };
  },
  watch: {
    visible() {
      this.visibleDialog = this.visible;
    },
    visibleDialog(val) {
      this.$emit("update:visible", val);
    },
    "data.Parent_Number": function (newVal) {
      this.form.Parent_Number = newVal;
    },
    "data.Level": function (newVal) {
      this.form.Level = newVal;
    },
  },
  methods: {
    getData() {
      const that = this;
      $.ajax({
        url: absolutepath() + "utils/Icon.json",
        type: "GET",
        success: function (data) {
          that.Icon = data;
        },
      });
    },
    submitForm(formName) {
      const that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.loading = true;
          // let baseData = deepClone(that.form);
          // baseData.Level = baseData.Level + 1
          // baseData.Parent_Number = baseData.Parent_Number?baseData.Parent_Number:BusinessPreview;//业务预览
          //, base_system_model_list:[baseData]
          $.ajax({
            headers: requestHeaders(),
            url: `${BASE_URL2}/generalBusiness/generalSave`,
            type: "POST",
            data: {
              Data: JSON.stringify({
                Add: { business_system_model_list: [that.form] },
              }),
            },
            success: function (res) {
              if (res.Status === "success") {
                that.form = { ...that.data, Icon: "", Model_Name: "" };
                that.$message.success("提交成功");
                that.$emit("update:visible", false);
                that.$emit("success");
              } else {
                that.$message.error("提交失败，请稍后再试");
              }
            },
            complete: function (XMLHttpRequest) {
              that.loading = false;
              requestPretreatment(XMLHttpRequest);
            },
            dataType: "json",
          });
        } else {
          that.$message({
            message: sumberError,
            type: "warning",
          });
          return false;
        }
      });
    },
  },
  mounted() {
    this.getData();
  },
});

Vue.component("edit-node", {
  //修改菜单组件
  template: `<el-dialog title="修改菜单" :visible.sync="visibleDialog" width="700px">
    <el-form ref="contract" :model="form" :rules="rules" :inline-message="true">
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="菜单名称">
                <el-form-item prop="Model_Name">
                    <el-input v-model.trim="form.Model_Name" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="form.childNodes=='0'" label="绑定页面（开发）">
                <el-form-item prop="Url">
                    <el-input v-model.trim="form.Url" placeholder="请输入绑定页面路径"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <--<el-descriptions-item v-if="form.childNodes=='0'" label="绑定页面">
                <el-form-item prop="Url">
                    <el-select placeholder="可选择绑定页面" style="width: 100%;" clearable filterable v-model.trim="form.Url">
                        <el-option v-for="(item,index) in page" :key="index" :label="item.Page_Name" :value="item.Page_SerialNumber"></el-option>
                    </el-select>
                </el-form-item>
            </el-descriptions-item>-->
            <el-descriptions-item label="绑定页面（开发）">
                <el-form-item prop="Url">
                    <el-input v-model.trim="form.Url" placeholder="请输入绑定页面路径"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="form.Level==1" label="菜单图标">
                <el-form-item prop="Icon">
                    <el-select placeholder="请选择菜单图标" style="width: 100%;" clearable filterable v-model.trim="form.Icon">
                        <el-option v-for="(item,index) in Icon" :key="index" :label="item" :value="'layui-icon '+item">
                            <i class="layui-icon" :class="item"></i>
                            <i>{{item}}</i>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm('contract')">提交</el-button>
    </span></el-dialog>`,
  props: ["data", "page", "visible"],
  data() {
    return {
      visibleDialog: false,
      Icon: [], //图标库
      form: this.data,
      baseData: {},
      rules: {
        Model_Name: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        Icon: [
          { required: true, message: "请选择菜单图标", trigger: "change" },
        ],
      },
      loading: false,
    };
  },
  watch: {
    visible() {
      this.visibleDialog = this.visible;
    },
    visibleDialog(val) {
      this.$emit("update:visible", val);
    },
    data: {
      handler(newVal) {
        const that = this;
        this.form = {};
        $.ajax({
          //查询账户信息
          headers: requestHeaders(),
          url: `${BASE_URL2}/member/getMemberPoint`,
          type: "POST",
          data: {
            Data: JSON.stringify([
              {
                tableName: "business_system_model_list",
                Condition: window.btoa(
                  unescape(
                    encodeURIComponent(
                      "Model_Number='" + newVal.Model_Number + "'"
                    )
                  )
                ),
              },
              {
                tableName: "base_system_model_list",
                Condition: window.btoa(
                  unescape(
                    encodeURIComponent(
                      "Model_Number='" + newVal.Model_Number + "'"
                    )
                  )
                ),
              },
            ]),
          },
          success: function ({
            base_system_model_list,
            business_system_model_list,
          }) {
            if (
              (base_system_model_list.length == 1,
              business_system_model_list.length == 1)
            ) {
              that.form = business_system_model_list[0];
              that.baseData = base_system_model_list[0];
            }
          },
          complete: function (XMLHttpRequest) {
            requestPretreatment(XMLHttpRequest); //config/config.js 响应预检
          },
          dataType: "json",
        });
      },
      deep: true, // 深度监听
    },
  },
  methods: {
    getData() {
      const that = this;
      $.ajax({
        url: absolutepath() + "utils/Icon.json",
        type: "GET",
        success: function (data) {
          that.Icon = data;
        },
      });
    },
    submitForm(formName) {
      const that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.loading = true;
          // let obj = deepClone(that.form);
          // that.baseData.Icon = obj.Icon;
          // that.baseData.Url = obj.Url;
          // that.baseData.Model_Name = obj.Model_Name;
          //,base_system_model_list:[that.baseData]
          $.ajax({
            headers: requestHeaders(),
            url: `${BASE_URL2}/generalBusiness/generalSave`,
            type: "POST",
            data: {
              Data: JSON.stringify({
                Modify: { business_system_model_list: [that.form] },
              }),
            },
            success: function (res) {
              if (res.Status === "success") {
                that.form = {};
                that.$message.success("修改成功");
                that.$emit("update:visible", false);
                that.$emit("success");
              } else {
                that.$message.error("修改失败，请稍后再试");
              }
            },
            complete: function (XMLHttpRequest) {
              that.loading = false;
              requestPretreatment(XMLHttpRequest);
            },
            dataType: "json",
          });
        } else {
          that.$message({
            message: sumberError,
            type: "warning",
          });
          return false;
        }
      });
    },
  },
  mounted() {
    this.getData();
  },
});
new Vue({
  el: "#app",
  data() {
    return {
      defaultProps: {
        children: "Children",
        label: "Model_Name",
      },
      tableData: [],
      form: {
        //查询筛选
      },
      nodeData: {
        //添加
        Parent_Number: "",
        Level: 1,
        Url: "",
      },
      nodeEditData: {}, //修改
      loading: false,
      dialogVisible: false,
      dialogEditVisible: false,
      page: [],
    };
  },
  mounted() {
    this.getList();
    this.getData();
  },
  methods: {
    onSerach() {},
    getList() {
      const that = this;
      $.ajax({
        headers: requestHeaders(),
        url: `${BASE_URL2}/generalBusiness/getAllFunctionMenu?UserName=&Password=&FunctionType=1`,
        type: "GET",
        success: function (data) {
          if (data.length > 0) {
            that.tableData = data;
          }
        },
        complete: function (XMLHttpRequest) {
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",
      });
    },
    getData() {
      const that = this;
      $.ajax({
        headers: requestHeaders(),
        url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
        type: "POST",
        data: {
          Data: "base_page_info",
          Condition: "Absolute_Path<>'' and Row_Status='0'",
        },
        success: function (data) {
          console.log(data);

          if (data.length > 0) {
            that.page = data;
          }
        },
        complete: function (XMLHttpRequest) {
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",
      });
    },
    Add(node, data) {
      if (node && data) {
        this.nodeData.Parent_Number = data.Model_Number;
        this.nodeData.Level = node.level + 1;
      } else {
        this.nodeData.Parent_Number = "";
        this.nodeData.Level = 1;
      }
      this.dialogVisible = true;
    },
    Edit(node, row) {
      this.nodeEditData = row;
      this.nodeEditData.childNodes = node.childNodes.length;
      this.dialogEditVisible = true;
    },
    Remove(row) {
      const that = this;
      this.$confirm("警告！此操作将删除该菜单节点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $.ajax({
            //查询账户信息
            headers: requestHeaders(),
            url: `${BASE_URL2}/generalBusiness/generalQueryByTableNameWithOriginal`,
            type: "POST",
            data: {
              Data: "business_system_model_list",
              Condition: "Model_Number='" + row.Model_Number + "'",
            },
            success: function (business_system_model_list) {
              if (business_system_model_list.length == 1) {
                business_system_model_list[0].Row_Status = "1";
                $.ajax({
                  headers: requestHeaders(),
                  url: `${BASE_URL2}/generalBusiness/generalSave`,
                  type: "POST",
                  data: {
                    Data: JSON.stringify({
                      Modify: { business_system_model_list },
                    }),
                  },
                  success: function (res) {
                    if (res.Status == "success") {
                      that.getList();
                      that.$message({
                        type: "success",
                        message: "删除成功!",
                      });
                    }
                  },
                  complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                  },
                  dataType: "json",
                });
              }
            },
            complete: function (XMLHttpRequest) {
              requestPretreatment(XMLHttpRequest); //config/config.js 响应预检
            },
            dataType: "json",
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消操作",
          });
        });
    },
  },
});
